<template>
  <div class="itemList">
    <div class="d2">
      <el-row>
        <el-col :span='2'>
          <i class="el-icon-shopping-cart-full" size='40px'></i>         
        </el-col>
        <el-col :span="3">
          <el-dropdown :hide-on-click="false">
            <span class="el-dropdown-link">
              二手书籍<i class="el-icon-caret-bottom el-icon--right"></i>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>英语专业书籍</el-dropdown-item>
                <el-dropdown-item>科学类书籍</el-dropdown-item>
                <el-dropdown-item>计算机专业书籍</el-dropdown-item>
                <el-dropdown-item disabled>机械类书籍</el-dropdown-item>
                <el-dropdown-item divided>四级资料</el-dropdown-item>
                <el-dropdown-item divided class="importData">考研资料</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>          
        </el-col>
        <el-col :span='2'></el-col>
        <el-col :span="4">
          <el-dropdown :hide-on-click="false">
            <span class="el-dropdown-link">
              二手文具用品<i class="el-icon-caret-bottom el-icon--right"></i>             
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>书包</el-dropdown-item>
                <el-dropdown-item>铅笔钢笔水笔</el-dropdown-item>
                <el-dropdown-item>笔袋</el-dropdown-item>
                <el-dropdown-item disabled>Action 4</el-dropdown-item>
                <el-dropdown-item divided>Action 5</el-dropdown-item>
                <el-dropdown-item divided>Action 6</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>          
        </el-col>      
      </el-row>
    </div>
  </div>
</template>

<script>
import {Search,ArrowRight} from "@element-plus/icons";
export default {
  name:'itemList',
  data() {
    return {
      
    }
  },
  components:{
    Search,
    ArrowRight
  },
  methods:{

  }

}
</script>

<style scoped>

.itemList{
  width: 100%;
  height: 200px;
  /* background-color: chartreuse; */
}


.itemList .d2{
  width: 100%;
  height:80%;
  background-color: aquamarine;
}
.example-showcase .el-dropdown + .el-dropdown {
  margin-left: 15px;

}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: red;
  display: flex;
  align-items: center;
}
.el-breadcrumb {
  margin-top: 10px;
}
.el-icon link{
  width: 20px;
  height: 20px;
  display: block !important;
}
el-dropdown-item .importData{
  color: red;
  background-color: red;
}
</style>